<template>
  <div class="app-container">
    <!--<div class="filter-container">-->
    <!--<el-button class="batch-delete" type="primary">删除选中</el-button>-->
    <!---->
    <!--</div>-->

    <el-row class="search-row">
      <el-col :span="2" :offset="22">
        <el-button
          type="primary"
          @click="toShowDiaLogClicked">新增</el-button>
      </el-col>

    </el-row>
    <el-table
      v-loading="listLoading"
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column label="片名" prop="film_name" align="center"/>
      <el-table-column label="时长" prop="time" align="center"/>
      <el-table-column label="累计场次" prop="play_num" align="center"/>
      <el-table-column label="创建时间" prop="create_time" align="center"/>
      <el-table-column label="更新时间" prop="update_time" align="center"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteFilmClicked(scope.$index,scope.row)">删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="toEditFilmClicked(scope.$index,scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="loadDataList" />

    <el-dialog :title="formName" :visible.sync="dialogTableVisible">
      <el-form ref="filmForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="片名" prop="film_name">
          <el-input v-model="form.film_name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="时长/分钟">
          <el-input-number v-model="form.time" :step="1"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('filmForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, update, deleteById, add } from '@/api/film'
import moment from 'moment'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'FilmList',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: false,
      dialogTableVisible: false,
      listData: [
        //          {
        //            film_name:'最好的我们',
        //            time:'160',
        //            create_time:'2019-08-12 12:00',
        //            play__num:12,
        //            film_num:'F202834744',
        //            update_time:'2019-08-12 12:00'
        //          }
      ],
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      form: {
        film_name: '最好的我们',
        time: '160',
        create_time: '2019-08-12 12:00',
        play__num: 12,
        film_num: 'F202834744',
        update_time: '2019-08-12 12:00'
      },
      rules: {
        film_name: [
          { required: true, message: '请输入片名', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      },
      formName: '新增影片',
      isAdd: true,
      editIndex: 0
    }
  },
  created() {
    this.loadDataList()
  },
  methods: {

    // 时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },

    // 打开新增影片弹出框
    toShowDiaLogClicked() {
      this.dialogTableVisible = true
      this.formName = '新增影片'
      this.isAdd = true
    },

    // 新增影片
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }

        var copyAssign = Object.assign({}, this.form)
        var nowTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')

        this.listLoading = true

        if (this.isAdd) {
          copyAssign.create_time = nowTime
          add(copyAssign).then(response => {
            this.listLoading = false
            this.loadDataList(true)
          })
        } else {
          copyAssign.update_time = nowTime
          console.info(copyAssign)
          update(copyAssign).then(response => {
            this.listLoading = false
            this.loadDataList(true)
          })
        }
        this.dialogTableVisible = false
        this.form = {}
      })
    },

    // 删除影片
    deleteFilmClicked(index, row) {
      this.listLoading = true
      deleteById(row).then(response => {
        this.listLoading = false
        this.loadDataList()
      })
    },

    /**
     * 加载列表数据
     * @param rest
     */
    loadDataList(rest) {
      if (rest === true) {
        this.listQuery.page = 1
      }
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.listData = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      })
    },

    // 编辑影片
    toEditFilmClicked(index, row) {
      this.form = Object.assign({}, row)
      this.dialogTableVisible = true
      this.formName = '编辑影片'
      this.editIndex = index
      this.isAdd = false
    }
  }
}

</script>

<style lang="css">
  .search-row{
    padding: 10px 0px;
  }
</style>

